<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <label class="el-form-item-label">所属农场</label>
        <el-select v-model="query.farm_id" filterable placeholder="请选择" style="width: 185px;" class="filter-item">
          <el-option v-for="item in dict.farms" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <label class="el-form-item-label">农机类型</label>
        <el-select v-model="query.eq_type" filterable placeholder="请选择" style="width: 185px;" class="filter-item">
          <el-option v-for="item in dict.eq_sq_type" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="600px"
      >
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
          <el-form-item label="所属农场" prop="farm_id">
            <el-select v-model="form.farm_id" filterable placeholder="请选择" style="width: 370px;">
              <el-option v-for="item in dict.farms" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="农机类型" prop="eq_type">
            <el-select v-model="form.eq_type" filterable placeholder="请选择" style="width: 185px;">
              <el-option v-for="item in dict.eq_sq_type" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="农机制造编号">
            <el-input v-model="form.eq_code" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="农机名称">
            <el-input v-model="form.eq_name" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="IMEI">
            <el-input v-model="form.imei" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="farm_name" label="所属农场" width="200" />
        <el-table-column prop="eq_type" label="农机类型" />
        <el-table-column prop="eq_code" label="农机制造编号" width="150" />
        <el-table-column prop="eq_name" label="农机名称" width="200" />
        <el-table-column prop="imei" label="IMEI" width="200" />
        <el-table-column prop="eq_status" label="设备状态" width="100" />
        <el-table-column prop="last_message_time" label="最后通讯时间" width="150" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
            <el-button
              size="mini"
              style="margin-right: 3px;"
              type="text"
              @click="handelViewData(scope.row)"
            >查看数据</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>

    <el-dialog title="气象站数据" :visible.sync="qxzVisible" width="1200px">
      <qxzDetial ref="qxzDetial" :permission="permission" />
    </el-dialog>

    <el-dialog title="性诱测报数据" :visible.sync="xycbVisible" width="900px">
      <xycbDetial ref="xycbDetial" :permission="permission" />
    </el-dialog>

    <el-dialog title="杀虫灯数据" :visible.sync="xcdVisible" width="1000px">
      <xcdDetial ref="xcdDetial" :permission="permission" />
    </el-dialog>

    <el-dialog title="测报灯数据" :visible.sync="cbdVisible" width="1000px">
      <cbdDetial ref="cbdDetial" :permission="permission" />
    </el-dialog>

    <el-dialog title="孢子仪数据" :visible.sync="bzyVisible" width="1000px">
      <bzyDetial ref="bzyDetial" :permission="permission" />
    </el-dialog>
  </div>
</template>

<script>
/** 四情设备登记  */
import crudFieldWeather from '@/api/jf/farmSq'
import CRUD, { crud, form, header, presenter } from '@crud/V2/crud'
import crudOperation from '@crud/V2/CRUD.operation'
import pagination from '@crud/V2/Pagination'
import rrOperation from '@crud/V2/RR.operation'
import udOperation from '@crud/V2/UD.operation'
import bzyDetial from './bzyDetial'
import cbdDetial from './cbdDetial'
import qxzDetial from './qxzDetial'
import xcdDetial from './xcdDetial'
import xycbDetial from './xycbDetial'

const defaultForm = { id: null, farm_id: null, eq_type: null, eq_code: null, eq_name: null, imei: null, remark: null }
export default {
  name: 'FarmSq',
  components: {
    pagination,
    crudOperation,
    rrOperation,
    udOperation,
    qxzDetial,
    xycbDetial,
    xcdDetial,
    cbdDetial,
    bzyDetial
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '四情设备登记',
      url: 'api/v2/base/farm/farmSq',
      idField: 'id',
      sort: 'id,desc',
      crudMethod: { ...crudFieldWeather }
    })
  },
  dictsV2: ['farms'],
  dicts: ['eq_sq_type'],
  data() {
    return {
      qxzVisible: false,
      xycbVisible: false,
      xcdVisible: false,
      cbdVisible: false,
      bzyVisible: false,
      permission: {
        list: ['admin', 'farmSq:list'],
        add: ['admin', 'farmSq:add'],
        edit: ['admin', 'farmSq:edit'],
        del: ['admin', 'farmSq:del']
      },
      rules: {
        farm_id: [{ required: true, message: '不能为空', trigger: 'blur' }],
        eq_type: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      queryTypeOptions: [{ key: 'farm_id', display_name: '农场编号' }, { key: 'eq_type', display_name: '农机类型' }],
      fields: []
    }
  },
  created() {
    console.log(this.$route.query)
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      console.log(this)
      return true
    },
    [CRUD.HOOK.beforeToEdit](crud, form) {},
    handelViewData(row) {
      if (row.eq_type === '气象站') {
        if (this.$refs.qxzDetial) {
          this.$refs.qxzDetial.crud.toQuery()
        }
        this.qxzVisible = true
      } else if (row.eq_type === '性诱测报') {
        if (this.$refs.xycbDetial) {
          this.$refs.xycbDetial.crud.toQuery()
        }
        this.xycbVisible = true
      } else if (row.eq_type === '杀虫灯') {
        if (this.$refs.scdDetial) {
          this.$refs.scdDetial.crud.toQuery()
        }
        this.xcdVisible = true
      } else if (row.eq_type === '测报灯') {
        if (this.$refs.cbdDetial) {
          this.$refs.cbdDetial.crud.toQuery()
        }
        this.cbdVisible = true
      } else if (row.eq_type === '孢子仪') {
        if (this.$refs.bzyDetial) {
          this.$refs.bzyDetial.crud.toQuery()
        }
        this.bzyVisible = true
      }
    }
  }
}
</script>

<style scoped></style>
